<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Ad-hoc emoji-picker-element test</title>
  <meta name="viewport" content="width=device-width">
  <style>
    html {
      font-family: sans-serif;
    }
    body {
      margin: 0 auto;
      max-width: 600px;
    }
    emoji-picker {
      margin: 0 auto;
    }
    @media screen and (max-width: 320px) {
      emoji-picker {
        width: 100%;
        --num-columns: 6;
        --category-emoji-size: 1.125rem;
      }
    }
    @media screen and (max-width: 240px) {
      emoji-picker {
        height: 80vh;
      }
    }
    pre {
      margin: 5px;
      padding: 5px;
      background: #333;
      color: white;
      position: fixed;
      right: 0;
      bottom: 0;
    }

    button.delete {
      position: fixed;
      left: 5px;
      bottom: 5px;
      padding: 5px;
    }
  </style>
</head>
<body>
<button class="delete">Delete database</button>
<script type="module">
  import { Picker, Database } from '/index.js'
  (async () => {
    if (typeof PerformanceObserver !== 'undefined') {
      const observer = new PerformanceObserver(entries => {
        const entry = entries.getEntriesByName('initialLoad')[0]
        if (entry) {
          const pre = document.createElement('pre')
          pre.classList.add('load-time')
          pre.innerHTML = 'initialLoad: ' + entry.duration.toFixed(2) + 'ms'
          document.body.appendChild(pre)
          observer.disconnect()
        }
      })
      observer.observe({
        entryTypes: ['measure']
      })
    }

    const opts = {
      dataSource: '/node_modules/emoji-picker-element-data/en/emojibase/data.json'
    }

    document.querySelector('.delete').addEventListener('click', () => {
      new Database(opts).delete()
    })

    const params = new URLSearchParams(location.search)
    if (params.has('worker')) {
      const worker = new Worker('/test/adhoc/worker.js', { type: 'module' })
      await new Promise((resolve, reject) => {
        worker.addEventListener('message', () => {
          worker.terminate()
          resolve()
        })
        worker.addEventListener('error', reject)
        worker.postMessage('init')
      })
    }

    if (new URLSearchParams(location.search).has('custom')) {
      // enable custom emoji
      const categoriesToCustomEmoji = (await (await fetch('/docs/custom.json')).json())
      const customEmoji = []
      for (const [category, names] of Object.entries(categoriesToCustomEmoji)) {
        for (const name of names) {
          customEmoji.push({
            category: category || undefined,
            name,
            shortcodes: [name],
            url: `/docs/custom/${name}.svg`
          })
        }
      }
      opts.customEmoji = customEmoji
    }

    const picker = new Picker(opts)
    picker.addEventListener('emoji-click', e => console.log(e))
    document.body.appendChild(picker)
  })()
</script>
</body>
</html>
